import { message, Table, Input, Button, Popconfirm, Form, Select } from 'antd';
import { addOrUpdateSecurityIa, deleteSecurityIa } from '@/services/city';
import styles from '../components.less';
import MyTable from './MyTableCell'

const officialConfg = {
  '0': '社保',
  '1': '公积金'
}
class CityOfficial extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: '序号',
          dataIndex: 'appNo',
          width: '6%',
        },
        {
          name: 'appIcon',
          title: '图标地址',
          type: 'input',
          editable: true,
          dataIndex: 'appIcon',
          width: '10%'
        },
        {
          name: 'appName',
          title: '应用名称',
          dataIndex: 'appName',
          width: '10%',
          type: 'input',
          editable: true,
        },
        {
          name: 'appUrl',
          title: '应用地址',
          type: 'input',
          editable: true,
          dataIndex: 'appUrl',
          width: '20%'
        },
        {
          name: 'appVersion',
          title: '版本号',
          dataIndex: 'appVersion',
          type: 'input',
          editable: true,
        },
        {
          name: 'updatetime',
          title: '更新时间',
          dataIndex: 'updatetime',
          width: '24%'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '20%',
          render: (text, record, index) =>
            this.state.sourcesData.length >= 1 ? (
              <div>
                <Popconfirm title="确认要保存‘社保用途数据’信息吗?" onConfirm={() => this.saveRowsHandler(index)}>
                  <button type="primary" style={{ margin: '10px' }} >保存</button>
                </Popconfirm>
                <Popconfirm title="确认要删除‘社保用途数据’信息吗?" onConfirm={() => this.deleteHandler(index)}>
                  <button type="primary" style={{ margin: '10px' }} >删除</button>
                </Popconfirm>
              </div>
            ) : null,
        },
      ],
      sourcesData: [],
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.sourcesdata.length !== this.state.sourcesData.length) {
      this.setState({
        sourcesData: nextProps.sourcesdata,
      })
    }
  }
  handleAdd = () => {
    const { count, sourcesData } = this.state;
    const { cityCode } = this.props;
    const newData = {
      payCity: cityCode,
      appNo: Number(sourcesData[sourcesData.length - 1].id) + 1,
      appIcon: '',
      appName: '',
      appUrl: '',
      appVersion: '0',
    };
    this.setState({
      sourcesData: [newData, ...sourcesData],
    });
  };
  deleteHandler = async index => {
    const sourcesData = [...this.state.sourcesData];
    const curData = sourcesData[index];
    const responseData = await deleteSecurityIa(curData);
    if (responseData && responseData.code === '000000') {
      const re = sourcesData.filter((item, i) => {
        return item.appNo != curData.appNo
      });
      this.setState({ sourcesData: re });
    } else {
      alert(responseData.message)
    }
  };
  saveRowsHandler = async index => {
    const newData = [...this.state.sourcesData];
    const item = newData[index];
    const responseData = await addOrUpdateSecurityIa(item);
    if (responseData && responseData.code === '000000') {
      message.success('操作成功');
    } else {
      alert(responseData.message)
    }
  };
  handleSave = row => {
    const newData = [...this.state.sourcesData].map((data) => {
      if (data.id === row.id) {
        data = row;
      }
      return data;
    });
    this.setState({ sourcesData: newData });
  };
  render() {
    const { sourcesData, columns } = this.state;
    const components = {
      body: {
        row: MyTable.EditableFormRow,
        cell: MyTable.EditableCell,
      },
    };
    const tempColumns = columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => {
          return {
            record,
            ...col,
            handleSave: this.handleSave,
          }
        },
      };
    });
    return (
      <div>
        <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
          添加
        </Button>
        <Table
          className={styles['my-edittable']}
          components={components}
          rowClassName={() => 'editable-row'}
          bordered
          size="small"
          rowKey={(item, index) => index}
          dataSource={sourcesData}
          columns={tempColumns}
        />
      </div>
    );
  }
}
export default CityOfficial;
